<template>
  <div class="containner">
    <div class="wrap">
      <div class="logo">
        <img src="@/assets/front-img/logo.png" alt="logo" />
      </div>
      <div class="resultText">支付已完成！</div>
      <div class="btnBg">
        <el-button type="success" @click="close">{{ time }}秒后关闭界面</el-button>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'paySuccess',
  props: {},
  components: {

  },
  data() {
    return {
      time: 5,
      timeInterval: null,
    }
  },
  computed: {},
  watch: {},
  methods: {
    close() {
      if (navigator.userAgent.indexOf("Firefox") != -1 || navigator.userAgent.indexOf("Chrome") != -1) {
        window.location.href = "about:blank";
        window.close();
      } else {
        window.opener = null;
        window.open("", "_self");
        window.close();
      }
    }
  },
  created() {
    
  },
  mounted() {
    this.timeInterval = setInterval(() => {
      this.time --
      if (this.time <= 0) {
        clearInterval(this.timeInterval)
        this.timeInterval = null
        
        this.close()
      }
    }, 1000);
  },
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {},
}
</script>

<style lang='scss' scoped>
  .containner {
    @include flex-center;
  }

  .wrap {
    width: 500px;

    .logo {
      margin-top: 30px;
      width: 100%;
      height: 100px;
      img {
        height: 100%;
      }
    }

    .resultText {
      text-align:center;
      margin-top: 80px;
      font-size: 30px;
      color: rgb(0, 202, 92);
      font-weight: bold;
    }

    .btnBg {
      @include flex-center;
      margin-top: 80px;
    }
  }
</style>